<template>
  <div class="upload-container">
    <!-- Upload Area -->
    <div class="upload-section">
      <div
        class="upload-area"
        :class="{ 'drag-over': isDragOver }"
        @drop="handleDrop"
        @dragover="handleDragOver"
        @dragleave="handleDragLeave"
        @click="triggerFileInput"
      >
        <div class="upload-icon">📁</div>
        <div class="upload-text">
          <h3>拖拽文件到此处或点击上传</h3>
          <p>支持 PDF、DOC、DOCX、TXT、MD 等格式</p>
          <p>单个文件最大 50MB</p>
        </div>
        <input
          type="file"
          ref="fileInput"
          @change="handleFileSelect"
          multiple
          accept=".pdf,.doc,.docx,.txt,.md,.json,.csv,.xlsx,.xls"
          class="file-input"
        />
      </div>

      <!-- File List -->
      <div v-if="files.length > 0" class="file-list">
        <h4>已选择文件</h4>
        <div
          v-for="(file, index) in files"
          :key="index"
          class="file-item"
        >
          <div class="file-info">
            <div class="file-icon">{{ getFileIcon(file.name) }}</div>
            <div class="file-details">
              <div class="file-name">{{ file.name }}</div>
              <div class="file-size">{{ formatFileSize(file.size) }}</div>
            </div>
          </div>
          <div class="file-status">
            <span v-if="file.status === 'pending'" class="status-pending">等待上传</span>
            <span v-else-if="file.status === 'uploading'" class="status-uploading">
              上传中 
            </span>
            <span v-else-if="file.status === 'completed'" class="status-completed">✓ 上传完成</span>
            <span v-else-if="file.status === 'error'" class="status-error">
              ✗ 上传失败
              <span v-if="file.error" class="error-message">{{ file.error }}</span>
            </span>
            <button @click="removeFile(index)" class="remove-btn">×</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Uploaded Documents Section -->
    <div class="uploaded-section">
      <div class="section-header">
        <h4>已上传文档</h4>
        <span class="doc-count">共 {{ uploadedDocuments.length }} 个文档</span>
      </div>

      <div v-if="uploadedDocuments.length === 0" class="empty-state">
        <div class="empty-icon">📄</div>
        <div class="empty-text">暂无上传的文档</div>
      </div>

      <div v-else class="uploaded-list">
        <div
          v-for="(doc, index) in uploadedDocuments"
          :key="doc.id"
          class="uploaded-item"
        >
          <div class="doc-info">
            <div class="doc-icon">{{ getFileIcon(doc.name) }}</div>
            <div class="doc-details">
              <div class="doc-name">{{ doc.name }}</div>
              <div class="doc-meta">
                <span class="doc-size">{{ formatFileSize(doc.size) }}</span>
                <span class="doc-date">{{ formatDate(doc.uploadDate) }}</span>
              </div>
            </div>
          </div>
          <div class="doc-actions">
            <button class="doc-action-btn preview-btn" @click="previewDocument(doc)">预览</button>
            <button class="doc-action-btn delete-btn" @click="deleteDocument(index)">删除</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Upload Progress -->
    <div v-if="isUploading" class="progress-section">
      <h4>上传进度</h4>
      <div class="progress-bar" :class="progressBarClass">
        <div class="progress-fill" :class="progressBarClass" :style="{ width: uploadProgress + '%' }"></div>
      </div>
      <div class="progress-text">
        {{ uploadProgress }}% 
        <span v-if="uploadProgress >= 78 && uploadProgress < 100" class="processing-hint">
          - 正在处理文件...
        </span>
        <span v-else-if="uploadProgress === 100" class="complete-hint">
          - 完成
        </span>
        <span v-else>
          - 上传中
        </span>
      </div>
    </div>

    <!-- Action Buttons -->
    <div class="action-buttons">
      <button @click="startUpload" :disabled="files.length === 0 || isUploading" class="upload-btn">
        {{ isUploading ? '上传中...' : '开始上传' }}
      </button>
      <button 
        v-if="hasFailedFiles" 
        @click="retryFailedUploads" 
        :disabled="isUploading" 
        class="retry-btn"
      >
        重试失败文件
      </button>
      <button @click="clearAll" :disabled="isUploading" class="clear-btn">清空所有</button>
    </div>

    <!-- Success Modal -->
    <div v-if="showSuccessModal" class="modal-overlay" @click="closeSuccessModal">
      <div class="success-modal" @click.stop>
        <div class="modal-header">
          <div class="modal-title">
            <span class="title-icon">⚡</span>
            <h3>UPLOAD COMPLETE</h3>
          </div>
          <button class="modal-close-btn" @click="closeSuccessModal">×</button>
        </div>
        
        <div class="modal-body">
          <div class="success-animation">
            <div class="success-circle">
              <div class="success-checkmark">✓</div>
            </div>
          </div>
          
          <div class="success-details">
            <p class="success-main-text">文档上传成功！</p>
            <p class="success-sub-text">{{ uploadedFileCount }} 个文件已添加到知识库</p>
            
            <div class="uploaded-files-summary">
              <div class="summary-title">已上传文件：</div>
              <div class="file-summary-list">
                <div 
                  v-for="(file, index) in recentlyUploadedFiles" 
                  :key="index"
                  class="file-summary-item"
                >
                  <span class="file-summary-icon">{{ getFileIcon(file.name) }}</span>
                  <span class="file-summary-name">{{ file.name }}</span>
                  <span class="file-summary-size">{{ formatFileSize(file.size) }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="modal-footer">
          <button class="modal-action-btn primary-btn" @click="closeSuccessModal">
            <span class="btn-text">确定</span>
          </button>
          <button class="modal-action-btn secondary-btn" @click="viewUploadedFiles">
            <span class="btn-text">查看文件</span>
          </button>
        </div>
      </div>
    </div>

    <!-- Result Modal (替代alert) -->
    <div v-if="showResultModal" class="modal-overlay" @click="closeResultModal">
      <div class="result-modal" @click.stop>
        <div class="modal-header">
          <div class="modal-title">
            <span class="title-icon" :class="resultModalData.type">
              <span v-if="resultModalData.type === 'success'">✅</span>
              <span v-else-if="resultModalData.type === 'error'">❌</span>
              <span v-else-if="resultModalData.type === 'warning'">⚠️</span>
              <span v-else-if="resultModalData.type === 'mixed'">📊</span>
              <span v-else>ℹ️</span>
            </span>
            <h3>{{ resultModalData.title }}</h3>
          </div>
          <button class="modal-close-btn" @click="closeResultModal">×</button>
        </div>
        
        <div class="modal-body">
          <div class="result-content">
            <p class="result-message">{{ resultModalData.message }}</p>
            <div v-if="resultModalData.details" class="result-details">
              <pre>{{ resultModalData.details }}</pre>
            </div>
            
            <!-- 混合结果的统计信息 -->
            <div v-if="resultModalData.type === 'mixed'" class="result-stats">
              <div class="stat-item success">
                <span class="stat-icon">✅</span>
                <span class="stat-label">成功</span>
                <span class="stat-value">{{ resultModalData.successCount || 0 }}</span>
              </div>
              <div class="stat-item error">
                <span class="stat-icon">❌</span>
                <span class="stat-label">失败</span>
                <span class="stat-value">{{ resultModalData.errorCount || 0 }}</span>
              </div>
            </div>
          </div>
        </div>
        
        <div class="modal-footer">
          <button class="modal-action-btn primary-btn" @click="closeResultModal">
            <span class="btn-text">确定</span>
          </button>
        </div>
      </div>
    </div>

    <!-- Confirm Modal (替代confirm) -->
    <div v-if="showConfirmModal" class="modal-overlay" @click="confirmModalData.onCancel">
      <div class="confirm-modal" @click.stop>
        <div class="modal-header">
          <div class="modal-title">
            <span class="title-icon">❓</span>
            <h3>{{ confirmModalData.title }}</h3>
          </div>
        </div>
        
        <div class="modal-body">
          <div class="confirm-content">
            <p class="confirm-message">{{ confirmModalData.message }}</p>
          </div>
        </div>
        
        <div class="modal-footer">
          <button class="modal-action-btn secondary-btn" @click="confirmModalData.onCancel">
            <span class="btn-text">取消</span>
          </button>
          <button class="modal-action-btn danger-btn" @click="confirmModalData.onConfirm">
            <span class="btn-text">确定</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const emit = defineEmits(['upload-complete'])

// File handling
const fileInput = ref(null)
const files = ref([])
const isDragOver = ref(false)
const isUploading = ref(false)
const uploadProgress = ref(0)
const uploadComplete = ref(false)
const showSuccessModal = ref(false)
const uploadedFileCount = ref(0)
const recentlyUploadedFiles = ref([])

// Result modal for alerts replacement
const showResultModal = ref(false)
const resultModalData = ref({})

// Confirm modal for confirmations
const showConfirmModal = ref(false)
const confirmModalData = ref({})

// Uploaded documents
const uploadedDocuments = ref([
  {
    id: 1,
    name: 'API接口文档.docx',
    size: 1048576, // 1MB
    uploadDate: new Date('2025-07-22'),
    type: 'docx',
  },
  {
    id: 2,
    name: '用户手册.txt',
    size: 512000, // 512KB
    uploadDate: new Date('2025-08-10'),
    type: 'txt',
  },
])

// Computed properties
const hasFailedFiles = computed(() => {
  return files.value.some(file => file.status === 'error')
})

const progressBarClass = computed(() => {
  if (uploadProgress.value === 100) {
    return 'completed'
  }
  return ''
})

// File handling methods
const triggerFileInput = () => {
  fileInput.value.click()
}

const handleFileSelect = (event) => {
  const selectedFiles = Array.from(event.target.files)
  addFiles(selectedFiles)
}

const handleDrop = (event) => {
  event.preventDefault()
  isDragOver.value = false
  const droppedFiles = Array.from(event.dataTransfer.files)
  addFiles(droppedFiles)
}

const handleDragOver = (event) => {
  event.preventDefault()
  isDragOver.value = true
}

const handleDragLeave = () => {
  isDragOver.value = false
}

const addFiles = (newFiles) => {
  newFiles.forEach((file) => {
    // Check file size limit
    if (file.size > 50 * 1024 * 1024) {
      showResultModal.value = true
      resultModalData.value = {
        type: 'warning',
        title: '文件过大',
        message: `文件 "${file.name}" 超过 50MB 限制`,
        details: '请选择小于 50MB 的文件'
      }
      return
    }
    
    // Check if file already exists
    const existingFile = files.value.find(f => f.name === file.name && f.size === file.size)
    if (existingFile) {
      showResultModal.value = true
      resultModalData.value = {
        type: 'warning',
        title: '文件已存在',
        message: `文件 "${file.name}" 已存在`,
        details: '相同的文件已在上传列表中'
      }
      return
    }
    
    files.value.push({
      file: file,
      name: file.name,
      size: file.size,
      status: 'pending',
      progress: 0,
      error: null
    })
  })
}

const removeFile = (index) => {
  files.value.splice(index, 1)
}

const clearAll = () => {
  // 清理进度动画
  if (progressAnimationId.value) {
    cancelAnimationFrame(progressAnimationId.value)
    progressAnimationId.value = null
  }
  
  files.value = []
  uploadComplete.value = false
  uploadProgress.value = 0
  isUploading.value = false
  showSuccessModal.value = false
  showResultModal.value = false
  showConfirmModal.value = false
  recentlyUploadedFiles.value = []
  uploadedFileCount.value = 0
}

// Utility methods
const getFileIcon = (filename) => {
  const extension = filename.split('.').pop().toLowerCase()
  const iconMap = {
    pdf: '📄',
    doc: '📝',
    docx: '📝',
    txt: '📃',
    md: '📋',
    json: '🔧',
    csv: '📊',
    xlsx: '📈',
    xls: '📈',
  }
  return iconMap[extension] || '📄'
}

const formatFileSize = (bytes) => {
  if (bytes === 0) return '0 Bytes'
  const k = 1024
  const sizes = ['Bytes', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

// Progress animation variables
const progressAnimationId = ref(null)

// Smooth progress animation to 78%
const animateProgressTo78 = () => {
  return new Promise((resolve) => {
    const startTime = Date.now()
    const duration = 5000 // 5 seconds
    const targetProgress = 78
    
    const animate = () => {
      const elapsed = Date.now() - startTime
      const progress = Math.min(elapsed / duration, 1)
      
      // Use easeOutCubic for smooth deceleration
      const easeOutCubic = 1 - Math.pow(1 - progress, 3)
      uploadProgress.value = Math.round(easeOutCubic * targetProgress)
      
      if (progress < 1) {
        progressAnimationId.value = requestAnimationFrame(animate)
      } else {
        uploadProgress.value = targetProgress
        resolve()
      }
    }
    
    animate()
  })
}

// Upload functionality
const startUpload = async () => {
  if (files.value.length === 0) return

  isUploading.value = true
  uploadComplete.value = false
  showSuccessModal.value = false
  uploadProgress.value = 0

  // Store files for success modal
  recentlyUploadedFiles.value = [...files.value]
  uploadedFileCount.value = 0

  // Start smooth progress animation to 78%
  const progressPromise = animateProgressTo78()

  let successCount = 0
  let errorCount = 0

  try {
    // Upload each file
    for (let i = 0; i < files.value.length; i++) {
      const fileItem = files.value[i]
      
      // Skip already completed files
      if (fileItem.status === 'completed') {
        successCount++
        continue
      }
      
      fileItem.status = 'uploading'
      fileItem.progress = 0
      fileItem.error = null

      try {
        await uploadSingleFile(fileItem, i)
        successCount++
        uploadedFileCount.value++
      } catch (error) {
        console.error(`文件 ${fileItem.name} 上传失败:`, error)
        fileItem.status = 'error'
        fileItem.error = error.message
        errorCount++
      }
    }

    // Wait for progress animation to reach 78% if not already there
    await progressPromise

    // 处理完成后，进度条跳到100%
    uploadProgress.value = 100
    
    // 延迟一下让用户看到100%
    setTimeout(() => {
      isUploading.value = false
      uploadComplete.value = true

      // Show results
      if (successCount > 0) {
        // Remove completed files from the list
        files.value = files.value.filter(f => f.status !== 'completed')
        
        setTimeout(() => {
          showSuccessModal.value = true
        }, 500)
      }
    }, 800)

    if (errorCount > 0) {
      showResultModal.value = true
      resultModalData.value = {
        type: 'mixed',
        title: '上传完成',
        message: `成功: ${successCount} 个文件，失败: ${errorCount} 个文件`,
        details: '失败的文件已保留，可以重新尝试上传。',
        successCount,
        errorCount
      }
    }

  } catch (error) {
    console.error('上传过程中发生错误:', error)
    isUploading.value = false
    
    showResultModal.value = true
    resultModalData.value = {
      type: 'error',
      title: '上传失败',
      message: error.message,
      details: '请确保:\n1. 后端服务运行在 localhost:8000\n2. 服务支持文件上传接口 /upload\n3. 网络连接正常'
    }
  }
}

// Upload single file with progress tracking
const uploadSingleFile = (fileItem, index) => {
  return new Promise((resolve, reject) => {
    const formData = new FormData()
    formData.append('file', fileItem.file)
    formData.append('filename', fileItem.name)

    const xhr = new XMLHttpRequest()

    // Progress tracking - 只更新单个文件进度，不影响总体进度
    xhr.upload.addEventListener('progress', (event) => {
      if (event.lengthComputable) {
        const progress = Math.round((event.loaded * 100) / event.total)
        fileItem.progress = progress
        // 总体进度由独立的动画控制，这里不再更新
      }
    })

    // Handle completion
    xhr.addEventListener('load', () => {
      if (xhr.status >= 200 && xhr.status < 300) {
        try {
          const result = JSON.parse(xhr.responseText)
          console.log('文件上传成功:', result)
          
          fileItem.status = 'completed'
          fileItem.progress = 100

          // Add to uploaded documents
          uploadedDocuments.value.push({
            id: Date.now() + index,
            name: fileItem.name,
            size: fileItem.size,
            uploadDate: new Date(),
            type: fileItem.name.split('.').pop().toLowerCase(),
          })

          resolve(result)
        } catch (parseError) {
          console.error('解析响应失败:', parseError)
          reject(new Error('服务器响应格式错误'))
        }
      } else {
        reject(new Error(`HTTP ${xhr.status}: ${xhr.statusText}`))
      }
    })

    // Handle errors
    xhr.addEventListener('error', () => {
      reject(new Error('网络错误，请检查连接'))
    })

    xhr.addEventListener('timeout', () => {
      reject(new Error('上传超时'))
    })

    // Configure request
    xhr.open('POST', 'http://localhost:8000/upload')
    xhr.timeout = 60000 // 60 seconds timeout
    
    // Send request
    xhr.send(formData)
  })
}

// Retry failed uploads
const retryFailedUploads = async () => {
  const failedFiles = files.value.filter(file => file.status === 'error')
  
  if (failedFiles.length === 0) return
  
  isUploading.value = true
  uploadProgress.value = 0
  
  // Start smooth progress animation to 78% for retry
  const progressPromise = animateProgressTo78()
  
  let successCount = 0
  
  for (let i = 0; i < failedFiles.length; i++) {
    const fileItem = failedFiles[i]
    fileItem.status = 'uploading'
    fileItem.progress = 0
    fileItem.error = null
    
    try {
      await uploadSingleFile(fileItem, i)
      successCount++
      uploadedFileCount.value++
    } catch (error) {
      console.error(`重试上传失败 ${fileItem.name}:`, error)
      fileItem.status = 'error'
      fileItem.error = error.message
    }
  }
  
  // Wait for progress animation to reach 78%
  await progressPromise
  
  // 重试完成后进度条跳到100%
  uploadProgress.value = 100
  
  setTimeout(() => {
    isUploading.value = false
    uploadProgress.value = 0
    
    // Check if all files are now completed
    const stillFailedFiles = files.value.filter(file => file.status === 'error')
    if (stillFailedFiles.length === 0) {
      files.value = []
      if (successCount > 0) {
        showSuccessModal.value = true
      }
    } else {
      showResultModal.value = true
      resultModalData.value = {
        type: 'mixed',
        title: '重试完成',
        message: `成功: ${successCount} 个文件，仍然失败: ${stillFailedFiles.length} 个文件`,
        details: '可以继续重试失败的文件',
        successCount,
        errorCount: stillFailedFiles.length
      }
    }
  }, 800)
}

// Document management methods
const previewDocument = (doc) => {
  showResultModal.value = true
  resultModalData.value = {
    type: 'info',
    title: '文档预览',
    message: `预览文档: ${doc.name}`,
    details: '这是一个模拟的预览功能。在实际应用中，这里会打开文档预览界面。'
  }
}

const deleteDocument = (index) => {
  showConfirmModal.value = true
  confirmModalData.value = {
    title: '确认删除',
    message: `确定要删除文档 "${uploadedDocuments.value[index].name}" 吗？`,
    onConfirm: () => {
      uploadedDocuments.value.splice(index, 1)
      showConfirmModal.value = false
      showResultModal.value = true
      resultModalData.value = {
        type: 'success',
        title: '删除成功',
        message: '文档已成功删除'
      }
    },
    onCancel: () => {
      showConfirmModal.value = false
    }
  }
}

const formatDate = (date) => {
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
  })
}

// Success modal methods
const closeSuccessModal = () => {
  showSuccessModal.value = false
  uploadComplete.value = false
  uploadProgress.value = 0
  emit('upload-complete')
}

const viewUploadedFiles = () => {
  showSuccessModal.value = false
  uploadComplete.value = false
  uploadProgress.value = 0
  // Scroll to uploaded documents section
  const uploadedSection = document.querySelector('.uploaded-section')
  if (uploadedSection) {
    uploadedSection.scrollIntoView({ behavior: 'smooth' })
  }
}

// Close result modal
const closeResultModal = () => {
  showResultModal.value = false
  resultModalData.value = {}
}
</script>
<style scoped>
.upload-container {
  padding: 2rem;
  max-width: 800px;
  margin: 0 auto;
  font-family: 'Courier New', 'Monaco', 'Menlo', monospace;
  color: #00ff88;
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
  border-radius: 8px;
  border: 1px solid #00ff88;
  box-shadow: 
    0 0 20px rgba(0, 255, 136, 0.3),
    inset 0 1px 0 rgba(0, 255, 136, 0.1);
  position: relative;
  overflow: hidden;
}

.upload-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(90deg, transparent 98%, rgba(0, 255, 136, 0.03) 100%),
    linear-gradient(0deg, transparent 98%, rgba(0, 255, 136, 0.03) 100%);
  background-size: 20px 20px;
  pointer-events: none;
  opacity: 0.5;
}

.upload-section {
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}

.upload-area {
  border: 2px dashed #00ff88;
  border-radius: 4px;
  padding: 3rem 2rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(0, 0, 0, 0.6);
  position: relative;
  overflow: hidden;
}

.upload-area::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 49%, rgba(0, 255, 136, 0.1) 50%, transparent 51%);
  background-size: 10px 10px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.upload-area:hover {
  border-color: #00ffff;
  background: rgba(0, 255, 255, 0.05);
  box-shadow: 
    0 0 20px rgba(0, 255, 255, 0.3),
    inset 0 0 20px rgba(0, 255, 255, 0.1);
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
}

.upload-area:hover::before {
  opacity: 1;
}

.upload-area.drag-over {
  border-color: #ff0080;
  background: rgba(255, 0, 128, 0.05);
  box-shadow: 
    0 0 30px rgba(255, 0, 128, 0.4),
    inset 0 0 30px rgba(255, 0, 128, 0.1);
  transform: scale(1.02);
}

.upload-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  color: #00ff88;
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.8);
  filter: drop-shadow(0 0 5px rgba(0, 255, 136, 0.5));
}

.upload-text h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.1rem;
  color: #00ff88;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.6);
}

.upload-text p {
  margin: 0.25rem 0;
  color: #00cc66;
  font-size: 0.9rem;
  text-shadow: 0 0 5px rgba(0, 204, 102, 0.4);
}

.file-input {
  display: none;
}

.file-list {
  margin-top: 1.5rem;
  position: relative;
  z-index: 2;
}

.file-list h4 {
  margin: 0 0 1rem 0;
  color: #00ff88;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.6);
}

.file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border: 1px solid #00ff88;
  border-radius: 4px;
  margin-bottom: 0.5rem;
  background: rgba(0, 0, 0, 0.7);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.file-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 136, 0.1), transparent);
  transition: left 0.5s ease;
}

.file-item:hover {
  box-shadow: 
    0 0 15px rgba(0, 255, 136, 0.3),
    inset 0 0 15px rgba(0, 255, 136, 0.1);
  transform: translateY(-2px);
  border-color: #00ffff;
  background: rgba(0, 255, 255, 0.05);
}

.file-item:hover::before {
  left: 100%;
}

.file-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
}

.file-icon {
  font-size: 1.5rem;
  color: #00ff88;
  text-shadow: 0 0 5px rgba(0, 255, 136, 0.6);
}

.file-details {
  display: flex;
  flex-direction: column;
}

.file-name {
  font-weight: 600;
  color: #00ff88;
  font-size: 0.9rem;
  text-shadow: 0 0 5px rgba(0, 255, 136, 0.4);
}

.file-size {
  color: #00cc66;
  font-size: 0.8rem;
  text-shadow: 0 0 3px rgba(0, 204, 102, 0.4);
}

.file-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-direction: column;
  align-items: flex-end;
}

.status-pending {
  color: #ffaa00;
  font-size: 0.8rem;
  text-shadow: 0 0 5px rgba(255, 170, 0, 0.6);
}

.status-uploading {
  color: #00ffff;
  font-size: 0.8rem;
  text-shadow: 0 0 5px rgba(0, 255, 255, 0.6);
}

.status-completed {
  color: #00ff88;
  font-size: 0.8rem;
  text-shadow: 0 0 5px rgba(0, 255, 136, 0.6);
}

.status-error {
  color: #ff0080;
  font-size: 0.8rem;
  text-shadow: 0 0 5px rgba(255, 0, 128, 0.6);
}

.error-message {
  display: block;
  font-size: 0.7rem;
  color: #ff6666;
  margin-top: 0.25rem;
  text-shadow: 0 0 3px rgba(255, 102, 102, 0.4);
}

.remove-btn {
  background: none;
  border: 1px solid #ff0080;
  color: #ff0080;
  cursor: pointer;
  font-size: 1.2rem;
  padding: 0.25rem;
  border-radius: 4px;
  transition: all 0.2s ease;
  text-shadow: 0 0 5px rgba(255, 0, 128, 0.6);
  margin-top: 0.5rem;
}

.remove-btn:hover {
  background: rgba(255, 0, 128, 0.2);
  color: #ff0080;
  box-shadow: 0 0 10px rgba(255, 0, 128, 0.4);
}

.uploaded-section {
  margin: 2rem 0;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 4px;
  border: 1px solid #00ff88;
  box-shadow: 
    0 0 15px rgba(0, 255, 136, 0.2),
    inset 0 0 15px rgba(0, 255, 136, 0.05);
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.section-header h4 {
  margin: 0;
  color: #00ff88;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.6);
}

.doc-count {
  color: #00cc66;
  font-size: 0.875rem;
  background: rgba(0, 255, 136, 0.1);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  border: 1px solid #00cc66;
  text-shadow: 0 0 5px rgba(0, 204, 102, 0.4);
}

.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: #00cc66;
}

.empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  color: #00ff88;
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.6);
  filter: drop-shadow(0 0 5px rgba(0, 255, 136, 0.4));
}

.empty-text {
  font-size: 0.875rem;
  text-shadow: 0 0 5px rgba(0, 204, 102, 0.4);
}

.uploaded-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.uploaded-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid #00cc66;
  border-radius: 4px;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.uploaded-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 136, 0.1), transparent);
  transition: left 0.5s ease;
}

.uploaded-item:hover {
  box-shadow: 
    0 0 15px rgba(0, 255, 136, 0.3),
    inset 0 0 15px rgba(0, 255, 136, 0.1);
  transform: translateY(-2px);
  border-color: #00ffff;
  background: rgba(0, 255, 255, 0.05);
}

.uploaded-item:hover::before {
  left: 100%;
}

.doc-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.doc-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  color: #00ff88;
  text-shadow: 0 0 5px rgba(0, 255, 136, 0.6);
}

.doc-details {
  display: flex;
  flex-direction: column;
}

.doc-name {
  font-weight: 600;
  color: #00ff88;
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
  text-shadow: 0 0 5px rgba(0, 255, 136, 0.4);
}

.doc-meta {
  display: flex;
  gap: 1rem;
}

.doc-size,
.doc-date {
  color: #00cc66;
  font-size: 0.75rem;
  text-shadow: 0 0 3px rgba(0, 204, 102, 0.4);
}

.doc-actions {
  display: flex;
  gap: 0.5rem;
}

.doc-action-btn {
  padding: 0.5rem 0.75rem;
  border: 1px solid;
  border-radius: 4px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.preview-btn {
  background: rgba(0, 255, 255, 0.1);
  color: #00ffff;
  border-color: #00ffff;
  text-shadow: 0 0 5px rgba(0, 255, 255, 0.6);
}

.preview-btn:hover {
  background: rgba(0, 255, 255, 0.2);
  color: #00ffff;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.4);
}

.delete-btn {
  background: rgba(255, 0, 128, 0.1);
  color: #ff0080;
  border-color: #ff0080;
  text-shadow: 0 0 5px rgba(255, 0, 128, 0.6);
}

.delete-btn:hover {
  background: rgba(255, 0, 128, 0.2);
  color: #ff0080;
  box-shadow: 0 0 10px rgba(255, 0, 128, 0.4);
}

.progress-section {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 4px;
  border: 1px solid #00ff88;
  box-shadow: 
    0 0 15px rgba(0, 255, 136, 0.2),
    inset 0 0 15px rgba(0, 255, 136, 0.05);
}

.progress-section h4 {
  margin: 0 0 1rem 0;
  color: #00ff88;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.6);
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 0.5rem;
  border: 1px solid #00cc66;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #00ff88, #00ffff);
  transition: width 0.3s ease;
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.6);
  position: relative;
}



.progress-bar.completed {
  border-color: #00ff88;
  box-shadow: 0 0 15px rgba(0, 255, 136, 0.6);
}

.progress-fill.completed {
  background: linear-gradient(90deg, #00ff88, #00ffff);
  box-shadow: 0 0 20px rgba(0, 255, 136, 1);
  animation: completedPulse 0.5s ease-out;
}

@keyframes completedPulse {
  0% { transform: scaleY(1); }
  50% { transform: scaleY(1.2); }
  100% { transform: scaleY(1); }
}



.progress-fill::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: progressShine 2s ease-in-out infinite;
}

@keyframes progressShine {
  0% { left: -100%; }
  100% { left: 100%; }
}

.progress-text {
  text-align: center;
  color: #00cc66;
  font-size: 0.9rem;
  text-shadow: 0 0 5px rgba(0, 204, 102, 0.4);
}

.processing-hint {
  color: #00cc66;
  font-size: 0.8rem;
  text-shadow: 0 0 5px rgba(0, 204, 102, 0.4);
}

.complete-hint {
  color: #00ff88;
  font-size: 0.8rem;
  text-shadow: 0 0 5px rgba(0, 255, 136, 0.6);
}

@keyframes processingPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.action-buttons {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.upload-btn,
.retry-btn,
.clear-btn {
  flex: 1;
  min-width: 120px;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
}

.upload-btn {
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.2), rgba(0, 255, 255, 0.2));
  color: #00ff88;
  border-color: #00ff88;
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.6);
}

.upload-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 136, 0.3), transparent);
  transition: left 0.5s ease;
}

.upload-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.3), rgba(0, 255, 255, 0.3));
  border-color: #00ffff;
  color: #00ffff;
  transform: translateY(-2px);
  box-shadow: 
    0 0 20px rgba(0, 255, 136, 0.4),
    0 4px 15px rgba(0, 255, 136, 0.3);
}

.upload-btn:hover:not(:disabled)::before {
  left: 100%;
}

.upload-btn:disabled {
  background: rgba(100, 100, 100, 0.2);
  border-color: #666666;
  color: #666666;
  cursor: not-allowed;
  opacity: 0.5;
  text-shadow: none;
}

.retry-btn {
  background: rgba(255, 170, 0, 0.1);
  color: #ffaa00;
  border-color: #ffaa00;
  text-shadow: 0 0 10px rgba(255, 170, 0, 0.6);
}

.retry-btn:hover:not(:disabled) {
  background: rgba(255, 170, 0, 0.2);
  transform: translateY(-2px);
  box-shadow: 
    0 0 20px rgba(255, 170, 0, 0.4),
    0 4px 15px rgba(255, 170, 0, 0.3);
}

.clear-btn {
  background: rgba(255, 0, 128, 0.1);
  color: #ff0080;
  border-color: #ff0080;
  text-shadow: 0 0 10px rgba(255, 0, 128, 0.6);
}

.clear-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 0, 128, 0.3), transparent);
  transition: left 0.5s ease;
}

.clear-btn:hover:not(:disabled) {
  background: rgba(255, 0, 128, 0.2);
  border-color: #ff0080;
  transform: translateY(-2px);
  box-shadow: 
    0 0 20px rgba(255, 0, 128, 0.4),
    0 4px 15px rgba(255, 0, 128, 0.3);
}

.clear-btn:hover:not(:disabled)::before {
  left: 100%;
}

.clear-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  text-shadow: none;
}

/* Success Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: modalFadeIn 0.3s ease-out;
}

.success-modal {
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
  border: 2px solid #00ff88;
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 
    0 0 50px rgba(0, 255, 136, 0.4),
    inset 0 0 50px rgba(0, 255, 136, 0.1);
  position: relative;
  animation: modalSlideIn 0.4s ease-out;
}

.success-modal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(90deg, transparent 98%, rgba(0, 255, 136, 0.03) 100%),
    linear-gradient(0deg, transparent 98%, rgba(0, 255, 136, 0.03) 100%);
  background-size: 20px 20px;
  pointer-events: none;
  opacity: 0.5;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid #00ff88;
  position: relative;
  z-index: 1;
}

.modal-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.title-icon {
  font-size: 1.5rem;
  color: #00ff88;
  text-shadow: 0 0 15px rgba(0, 255, 136, 0.8);
  animation: iconPulse 2s ease-in-out infinite;
}

.modal-title h3 {
  margin: 0;
  color: #00ff88;
  font-size: 1.2rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.6);
}

.modal-close-btn {
  background: none;
  border: 1px solid #ff0080;
  color: #ff0080;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  text-shadow: 0 0 5px rgba(255, 0, 128, 0.6);
}

.modal-close-btn:hover {
  background: rgba(255, 0, 128, 0.2);
  box-shadow: 0 0 15px rgba(255, 0, 128, 0.4);
  transform: scale(1.1);
}

.modal-body {
  padding: 2rem 1.5rem;
  position: relative;
  z-index: 1;
}

.success-animation {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

.success-circle {
  width: 80px;
  height: 80px;
  border: 3px solid #00ff88;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  animation: circleGlow 2s ease-in-out infinite;
}

.success-circle::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border: 2px solid transparent;
  border-top-color: #00ffff;
  border-radius: 50%;
  animation: circleRotate 2s linear infinite;
}

.success-checkmark {
  font-size: 2.5rem;
  color: #00ff88;
  text-shadow: 0 0 20px rgba(0, 255, 136, 0.8);
  animation: checkmarkPop 0.6s ease-out 0.3s both;
}

.success-details {
  text-align: center;
}

.success-main-text {
  font-size: 1.3rem;
  color: #00ff88;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.6);
}

.success-sub-text {
  font-size: 1rem;
  color: #00cc66;
  margin: 0 0 2rem 0;
  text-shadow: 0 0 5px rgba(0, 204, 102, 0.4);
}

.uploaded-files-summary {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid #00cc66;
  border-radius: 4px;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.summary-title {
  color: #00ff88;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 0 5px rgba(0, 255, 136, 0.4);
}

.file-summary-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.file-summary-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 4px;
  border: 1px solid rgba(0, 255, 136, 0.2);
}

.file-summary-icon {
  font-size: 1rem;
  color: #00ff88;
  text-shadow: 0 0 5px rgba(0, 255, 136, 0.6);
}

.file-summary-name {
  flex: 1;
  color: #00cc66;
  font-size: 0.8rem;
  text-shadow: 0 0 3px rgba(0, 204, 102, 0.4);
}

.file-summary-size {
  color: #00aa55;
  font-size: 0.7rem;
  text-shadow: 0 0 3px rgba(0, 170, 85, 0.4);
}

.modal-footer {
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
  border-top: 1px solid #00ff88;
  position: relative;
  z-index: 1;
}

.modal-action-btn {
  flex: 1;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
}

.primary-btn {
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.2), rgba(0, 255, 255, 0.2));
  color: #00ff88;
  border-color: #00ff88;
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.6);
}

.primary-btn:hover {
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.3), rgba(0, 255, 255, 0.3));
  border-color: #00ffff;
  color: #00ffff;
  transform: translateY(-2px);
  box-shadow: 
    0 0 20px rgba(0, 255, 136, 0.4),
    0 4px 15px rgba(0, 255, 136, 0.3);
}

.secondary-btn {
  background: rgba(0, 255, 255, 0.1);
  color: #00ffff;
  border-color: #00ffff;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.6);
}

.secondary-btn:hover {
  background: rgba(0, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 
    0 0 20px rgba(0, 255, 255, 0.4),
    0 4px 15px rgba(0, 255, 255, 0.3);
}

/* Animations */
@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalSlideIn {
  from { 
    opacity: 0;
    transform: translateY(-50px) scale(0.9);
  }
  to { 
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes iconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

@keyframes circleGlow {
  0%, 100% { 
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.4);
  }
  50% { 
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.6);
  }
}

@keyframes circleRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes checkmarkPop {
  0% { 
    transform: scale(0);
    opacity: 0;
  }
  50% { 
    transform: scale(1.2);
  }
  100% { 
    transform: scale(1);
    opacity: 1;
  }
}

/* Result Modal Styles */
.result-modal,
.confirm-modal {
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
  border: 2px solid #00ff88;
  border-radius: 8px;
  width: 90%;
  max-width: 450px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 
    0 0 50px rgba(0, 255, 136, 0.4),
    inset 0 0 50px rgba(0, 255, 136, 0.1);
  position: relative;
  animation: modalSlideIn 0.4s ease-out;
}

.result-modal::before,
.confirm-modal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(90deg, transparent 98%, rgba(0, 255, 136, 0.03) 100%),
    linear-gradient(0deg, transparent 98%, rgba(0, 255, 136, 0.03) 100%);
  background-size: 20px 20px;
  pointer-events: none;
  opacity: 0.5;
}

.title-icon.success {
  color: #00ff88;
  text-shadow: 0 0 15px rgba(0, 255, 136, 0.8);
}

.title-icon.error {
  color: #ff0080;
  text-shadow: 0 0 15px rgba(255, 0, 128, 0.8);
}

.title-icon.warning {
  color: #ffaa00;
  text-shadow: 0 0 15px rgba(255, 170, 0, 0.8);
}

.title-icon.mixed {
  color: #00ffff;
  text-shadow: 0 0 15px rgba(0, 255, 255, 0.8);
}

.result-content,
.confirm-content {
  text-align: center;
}

.result-message,
.confirm-message {
  font-size: 1.1rem;
  color: #00ff88;
  font-weight: 600;
  margin: 0 0 1rem 0;
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.6);
}

.result-details {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid #00cc66;
  border-radius: 4px;
  padding: 1rem;
  margin: 1rem 0;
  text-align: left;
}

.result-details pre {
  color: #00cc66;
  font-size: 0.9rem;
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
  text-shadow: 0 0 5px rgba(0, 204, 102, 0.4);
}

.result-stats {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin: 1.5rem 0;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 4px;
  border: 1px solid;
  min-width: 80px;
}

.stat-item.success {
  border-color: #00ff88;
  background: rgba(0, 255, 136, 0.05);
}

.stat-item.error {
  border-color: #ff0080;
  background: rgba(255, 0, 128, 0.05);
}

.stat-icon {
  font-size: 1.5rem;
}

.stat-label {
  font-size: 0.8rem;
  color: #00cc66;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 0 5px rgba(0, 204, 102, 0.4);
}

.stat-value {
  font-size: 1.2rem;
  font-weight: 600;
  color: #00ff88;
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.6);
}

.danger-btn {
  background: rgba(255, 0, 128, 0.1);
  color: #ff0080;
  border-color: #ff0080;
  text-shadow: 0 0 10px rgba(255, 0, 128, 0.6);
}

.danger-btn:hover {
  background: rgba(255, 0, 128, 0.2);
  transform: translateY(-2px);
  box-shadow: 
    0 0 20px rgba(255, 0, 128, 0.4),
    0 4px 15px rgba(255, 0, 128, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
  .upload-container {
    padding: 1rem;
    margin: 1rem;
  }
  
  .upload-area {
    padding: 2rem 1rem;
  }
  
  .file-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .file-status {
    align-self: flex-end;
    flex-direction: row;
    align-items: center;
  }
  
  .action-buttons {
    flex-direction: column;
  }
  
  .modal-footer {
    flex-direction: column;
  }
  
  .uploaded-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  
  .doc-actions {
    align-self: flex-end;
  }
  
  .result-stats {
    flex-direction: column;
    align-items: center;
  }
  
  .stat-item {
    width: 100%;
    max-width: 200px;
  }
}
</style>